<template>
	<div>
		<Navbar></Navbar>
		<div class="text-center fs_large bold c-text">
			安能智保光伏运营期保障方案
		</div>
		<div class="p-4">
			<StageBar :active="1"></StageBar>
			<img
				src="@/assets/success.svg"
				alt=""
				width="60px"
				height="auto"
				class="mbl-4 block"
				style="margin-inline: auto"
			/>
			<p class="c-text fs_max bold mb-3 text-center">已发送至保险公司</p>
			<p class="c-text fs_medium text-center">
				您的核保信息已经提交成功，请等待保险公司的核保结果，相关进度请咨询您的保险服务人员。
			</p>
			<gridbox
				columns="1fr 1fr 1fr"
				gap="var(--space-2)"
				class="m-3 p-4 radius-3 bg-gray"
			>
				<gridbox
					columns="70px 1fr"
					v-for="field in fieldList"
					:key="field.prop"
				>
					<span class="c9"> {{ field.label }}: </span>
					<span>
						{{ orderDetail[field.prop] || '--' }}
					</span>
				</gridbox>
			</gridbox>
		</div>
	</div>
</template>

<script>
import Navbar from '@/components/Navbar'
import StageBar from './components/StageBar.vue'
import { queryOrderDetail } from './api/order'
export default {
	props: {
		businessId: Number
	},
	data() {
		return {
			orderDetail: {},
			fieldList: [
				{
					label: '订单编号',
					prop: 'num',
					width: 120
				},
				{
					label: '产品名称',
					prop: 'productName'
				},
				{
					label: '订单状态',
					prop: 'statusStr'
				},
				{
					label: '投保人',
					prop: 'customerName'
				},
				{
					label: '被保人',
					prop: 'relationName'
				},
				{
					label: '订单金额',
					prop: 'money'
				},
				{
					label: '承保机构',
					prop: 'supplierName'
				}
			]
		}
	},
	computed: {
		businessId() {
			return this.$route.query.businessId
		}
	},
	mounted() {
		queryOrderDetail({
			businessId: this.businessId
		}).then((res) => {
			this.orderDetail = res.data
		})
	},
	methods: {},
	components: {
		Navbar,
		StageBar
	}
}
</script>

<style lang="scss" scoped="scoped">
.bg-gray {
	background: #f9f9fe;
	max-width: 850px;
	margin-inline: auto;
}
</style>
